<template>
	<view class="page">
		<!-- 预约码 -->
		<view class="Appointment_code">
			<image class="bar_code" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%BC%B4%E8%B4%B9%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u1321.png" mode="widthFix"></image>
			<view class="num_code">
				20200101001598Z
			</view>
			<view class="note">
				检查签到时可出示此码
			</view>
		</view>
		<!-- 缴费信息 -->
		<view class="Payment_information">
			<view class="title">
				缴费信息
			</view>
			<view class="info_lists">
				<view class="info_list">
					登记号：20200101001598Z
				</view>
				<view class="info_list">
					就诊人：{{optioninfo.patient}}
				</view>
				<view class="info_list">
					就诊科室：{{optioninfo.depart}}
				</view>
				<view class="info_list">
					开单医生：{{optioninfo.doctor}}
				</view>
				<view class="info_list">
					开单时间：2020-01-01 10:20:36
				</view>
			</view>
		</view>
		<!-- 项目明细 -->
		<view class="Project_Details">
			<view class="title">
				项目明细
			</view>
			<view class="project_lists">
				<view class="project_list">
					<view class="address" style="background-color: rgba(230, 244, 255, 1); color: #1677FF;">
						请前往一楼门诊药房2号窗口取药
					</view>
					<view class="project_type">
						<view class="logo" style="background-color: rgba(230, 244, 255, 1); color: #1677FF;">
							药
						</view>
						<view class="odd_numbers">
							处方号（20200101032）
						</view>
					</view>
					<view class="kind_lists">
						<view class="kind_list">
							<view class="item_title">
								1、葆宫止血颗粒*3盒
							</view>
							<view class="item_price">
								￥50.13
							</view>
						</view>
						<view class="kind_list">
							<view class="item_title">
								2、维生素B1*2瓶
							</view>
							<view class="item_price">
								￥20.00
							</view>
						</view>
						<view class="kind_list">
							<view class="item_title">
								3、维生素B2*2瓶
							</view>
							<view class="item_price">
								￥10.00
							</view>
						</view>
						<view class="kind_list">
							<view class="item_title">
								4、维生素E*2瓶
							</view>
							<view class="item_price">
								￥10.00
							</view>
						</view>
						<view class="kind_list">
							<view class="item_title">
								5、维生素C*2瓶
							</view>
							<view class="item_price">
								￥10.00
							</view>
						</view>
					</view>
				</view>
				<view class="project_list">
					<view class="address" style="background-color: rgba(255, 251, 230, 1); color: #FAAD14;">
						请前往门诊三楼放射科进行检查
					</view>
					<view class="project_type">
						<view class="logo" style="background-color: rgba(255, 251, 230, 1); color: #FAAD14;">
							查
						</view>
						<view class="odd_numbers">
							检查单号（20200101133）
						</view>
					</view>
					<view class="kind_lists">
						<view class="kind_list">
							<view class="item_title">
								1、CT
							</view>
							<view class="item_price">
								￥200.00
							</view>
						</view>
						<view class="kind_list">
							<view class="item_title">
								2、上腹部CT平扫
							</view>
							<view class="item_price">
								￥220.00
							</view>
						</view>
					</view>
				</view>
				<view class="project_list">
					<view class="address" style="background-color: rgba(255, 251, 230, 1); color: #FAAD14;">
						请前往门诊四楼彩超室科进行检查
					</view>
					<view class="project_type">
						<view class="logo" style="background-color: rgba(255, 251, 230, 1); color: #FAAD14;">
							查
						</view>
						<view class="odd_numbers">
							检查单号（20200101134）
						</view>
					</view>
					<view class="kind_lists">
						<view class="kind_list">
							<view class="item_title">
								1、腹部彩超
							</view>
							<view class="item_price">
								￥200.00
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 合计 -->
			<view class="amount">
				合计：￥720.13
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	const optioninfo = ref({
		patient:''
	})
	onLoad((option)=>{
		optioninfo.value = option
	})
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 26rpx 26rpx 40rpx;
		box-sizing: border-box;
		// 预约码
		.Appointment_code{
			width: 100%;
			height: 330rpx;
			background-color: #fff;
			padding: 30rpx 0;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			.bar_code{
				width: 600rpx;
			}
			.num_code{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-weight: 700;
				margin: 18rpx 0;
			}
			.note{
				font-family: 'ArialMT', 'Arial', sans-serif;
				color: 'ArialMT', 'Arial', sans-serif;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		// 缴费信息
		.Payment_information{
			width: 100%;
			padding: 32rpx 40rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 30rpx;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-weight: 700;
			}
			.info_lists{
				margin-top: 26rpx;
				.info_list{
					height: 40rpx;
					line-height: 40rpx;
					margin-top: 16rpx;
					font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #000;
				}
			}
		}
		// 项目明细
		.Project_Details{
			width: 100%;
			padding: 34rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 16rpx;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-weight: 700;
			}
			.project_lists{
				margin-top: 6rpx;
				.project_list{
					padding: 40rpx 0;
					border-bottom: 2rpx solid #f2f2f2;
					.address{
						width: 100%;
						text-align: center;
						border-radius: 4rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					}
					.project_type{
						height: 42rpx;
						margin-top: 18rpx;
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
						.logo{
							width: 46rpx;
							height: 42rpx;
							border-radius: 4rpx;
							line-height: 42rpx;
							text-align: center;
							font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
						}
						.odd_numbers{
							font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #000;
							margin-left: 18rpx;
						}
					}
					.kind_lists{
						.kind_list{
							height: 40rpx;
							margin-top: 16rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
							color: #7F7F7F;
							font-size: 28rpx;
						}
					}
				}
			}
			.amount{
				text-align: right;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				font-weight: 700;
				margin-top: 40rpx;
			}
		}
	}       
</style>
